<template>
  <div class="main-warp cityRank">
    <dv-border-box-7 style="width:calc(1480 / 3);height: 300px;padding:25px;">
      <div class="head">
        <i class="iconfont icon-paiming"></i>
        <div class="title">全省理政关键词 TOP 5</div>
        <dv-decoration-2 style="width:100%;position:absolute;bottom:-4px;height:8px;"/>
      </div>
      <div class="content">
        <Echart :options="options" height="225px" width="440px"/>
      </div>
    </dv-border-box-7>
  </div>
</template>
<script>
import Echart from "../../common/echart";

export default {
  components: {Echart},
  data() {
    return {
      options: {},
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // let colorList = ['#95a5f8', '#f6ce7e', '#ef8d55', '#69d6d5', '#62a0f7']
      let colorList = ['rgba(107, 116, 228, .7)','rgba(67, 145, 244, .7)','rgba(56, 187, 229, .7)','rgba(105, 214, 253, .7)','#819cd9']
      let barData = [
        {
          "count": 376,
          "name": "房产开发",

        },
        {
          "count": 365,
          "name": "公路建设维修",

        },
        {
          "count": 356,
          "name": "拖欠工资",

        },
        {
          "count": 287,
          "name": "物业管理",

        },
        {
          "count": 223,
          "name": "市政道路及设施",
        }
      ]
      this.options = {
        grid: {
          top: '10px',
          left: '10px', //默认10%
          right: '10px', //默认10%
          bottom: '10px', //默认60
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            // alignWithLabel: false,
            show: false
          },
          axisLine: {
            show: false,
          }
        },

        yAxis: {
          axisTick: {
            // alignWithLabel: false,
            show: false
          },
          axisLine: {
            show: false,
          },
          type: 'category',
          axisLabel: {
            textStyle: {
              fontWeight: 'normal',
              fontSize: 14,
              fontSmoothing: 'auto',
              color: '#fff',
              fontFamily: 'SIYUAN'
            }
          },
          data: barData.map((item, index) => {
            return item.name
          })
        },
        series: [
          {
            type: 'bar',
            label: {
              formatter: function(params) {
                // 将标签文字按照适当的位置进行换行
                var newParamsName = ''
                var paramsNameNumber = params.name.length
                var provideNumber = 3  // 每行能显示的字的个数
                // 根据每行能显示的字数，计算出标签文字需要换行的次数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                // 如果换行，则每行显示的文字数需要根据字数进行调整
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    // 每行最后一次不换行
                    if (p === rowNumber - 1) {
                      tempStr = params.name.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.name.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params.name
                }
                // 返回的格式，根据具体的业务需求确定
                return newParamsName
              }
            },
            barWidth:20,
            data: barData.map((item, index) => {
              item.value = item.count
              item.itemStyle = {
                barBorderRadius: [0, 30, 30, 0],
                color: colorList[index],
              }
              return item
            })
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>


@import '@/assets/scss/thread.scss';

.main-warp {
  width: calc(1460 / 3) * 1px;
}
</style>
